<template>
	<view class="page">
		<view class="example-body">
			<view class="search_left">
				查询历史日期
			</view>
			<view class="search_right">
				<uni-datetime-picker v-model="range" type="daterange" rangeSeparator="至" @change='maskClick' />
			</view>
		</view>
		<view class="main">
			<view class="main_box">
				<view class="li" v-for="(item,index) in Table_List" :key="index">
					<span class="record">检测结果：{{item.DetectionResult}}</span>
					<span class="time">{{item.Created}}</span>
					<span class="detail" @click="detail(item.Id)">报告详情>></span>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="center" style="border-radius: 26rpx;">
			<view class="agreement-height">
				<view class="popup_info">
					<p class="p">检测结果 <span class="sp_1">{{this.Detail_List.DetectionResult}}</span> </p>
					<p class="p">检测时间 <span class="sp_1">{{this.Detail_List.DetectionTime}}</span></p>
					<p class="p" style="display: block;height: 300rpx;">检测地址 <span
							class="sp_2">{{this.Detail_List.Address}}</span></p>
					<p class="p">设备编号 <span class="sp_1"
							style="margin-right: 30rpx;">{{this.Detail_List.DeviceNo}}</span></p>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		Find_Releted,
		Find_Releted_detail
	} from '@/utils/api.js'
	export default {
		components: {},
		data() {
			return {
				range: [],
				Page: 10,
				Limit: 1,
				Table_List: [],
				Detail_List: [],
				beginTime: null,
				endTime: null,

			}
		},
		methods: {
			maskClick(e) {
				console.log('maskClick事件:', e);
				this.beginTime = e[0]
				this.endTime = e[1]
				console.log(this.beginTime, this.endTime, '当前所选时间');
				this.Limit=1
				this.Table_List=[]
				this.Find_Releted()
			},
			//查询
			Find_Releted() {
				Find_Releted({
					phone: '17767107262',
					// phone:this.$store.state.vx_u_info.Phone,
					beginTime: this.beginTime,
					endTime: this.endTime,
					Page: this.Page,
					Limit: this.Limit
				}).then(res => {
					console.log(res);
					if (res.Code == 200) {
						let arr = []
						arr = res.Data
						arr.forEach((item) => {
							if (item.DetectionResult == 0) {
								item.DetectionResult = '阴性'
							} else if (item.DetectionResult == 1) {
								item.DetectionResult = '阳性'
							}
						})
						console.log(arr, '转换后');
						arr.forEach(item => {
							this.Table_List.push(item);
						});

					}

				})
			},
			//结果详情
			detail(id) {
				this.$refs.popup.open('center')
				Find_Releted_detail(
					id
				).then(res => {
					if (res.Code == 200) {
						let arr = {}
						arr = res.Data
						if (arr.DetectionResult == 0) {
							arr.DetectionResult = '阴性'
						} else if (arr.DetectionResult == 1) {
							arr.DetectionResult = '阳性'
						}
						this.Detail_List = arr
					}
					console.log(this.Detail_List, '详情');
				})
			}

		},
		mounted() {
			this.Table_List = []
			this.Find_Releted()
		},
		onReachBottom() {
			console.log('refresh');
			this.Limit++
			this.Find_Releted()
		
			console.log(this.Table_List);
		},
		 onPullDownRefresh() {
		      // 下拉刷新时触发的方法
		   	uni.stopPullDownRefresh()
		    
		  },

	}
</script>

<style scoped lang="scss">
	::v-deep .uni-datetime-picker--btn {
		background-color: #1658CE;
	}

	::v-deep .uni-calendar-item__weeks-box .uni-calendar-item--checked {
		background-color: #1658CE;
	}

	::v-deep .uni-calendar-item--multiple .uni-calendar-item--before-checked {
		background-color: #1658CE;
	}

	::v-deep .uni-calendar-item--multiple .uni-calendar-item--after-checked {
		background-color: #1658CE;
	}

	.page {
		width: 100vw;
		height: 100vh;
		position: relative;
		display: flex;
		flex-direction: column;

		.example-body {
			width: 100%;
			height: 10%;
			position: relative;

			.search_left {
				position: absolute;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				left: 32rpx;
				top: 52rpx;
			}

			.search_right {
				position: absolute;
				width: 450rpx;
				height: 48rpx;
				top: 36rpx;
				right: 32rpx;
			}
		}

		.main {
			width: 100%;
			height: 83vh;
			background-color: #F0F0F0;
			overflow-y: initial;


			.main_box {
				margin-top: 50rpx;
				background-color: #F0F0F0;
				padding-bottom: 20rpx;

				.li {
					position: relative;
					width: 686rpx;
					height: 170rpx;
					background: #FFFFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin: 40rpx auto;

					.record {
						position: absolute;
						top: 32rpx;
						left: 32rpx;
						font-size: 34rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
					}

					.time {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #999999;
						position: absolute;
						left: 32rpx;
						bottom: 15rpx;
					}

					.detail {
						font-size: 24rpx;
						// font-family: PingFang SC, PingFang SC;
						// font-weight: 400;
						position: absolute;
						right: 60rpx;
						bottom: 15rpx;
						color: #999999;
						letter-spacing: 3rpx;
					}
				}
			}
		}

		.agreement-height {
			width: 615rpx;
			height: 70vh;
			margin: 0 auto;
			border-radius: 26rpx;
			background-color: #ffffff;

			.popup_info {
				margin: auto;
				width: 80%;
				padding-top: 60rpx;

				.p {
					margin-top: 40rpx;

					.sp_1 {
						float: right;
					}

					.sp_2 {
						float: right;
						display: inline-block;
						width: 330rpx;
					}
				}


			}
		}
	}
</style>